@media screen and (min-width:960px) {


    .yd-baokao-process {
        display: none;
    }

    .baokao-process {

        overflow: hidden;
        margin: 1rem;
        height: 6rem;


    }

    .baokao-process-panel {
        width: 12.6rem;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .baokao-process-panel>dl {
        width: 3.04rem;
        height: 2.12rem;
        background: url(/img/html5_join/new_index/process-kuang.png)no-repeat;
        background-size: 100% 100%;
        font-size: 0.2rem;
        position: relative;
        font-family: "siyuan-r";
        margin-top: 0.53rem;
    }


    .baokao-process-panel>dl>dt {
        height: 1.52rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4a4a4a;
    }


    .baokao-process-panel>dl>dt:hover {
        text-decoration: underline;
    }

    .baokao-process-panel>dl>dd {
        height: 0.64rem;
        text-align: center;
        line-height: 0.64rem;
    }

    .baokao-process-panel>dl>span {
        position: absolute;
        font-size: 0.29rem;
        letter-spacing: 0.02rem;
        font-weight: bold;
        left: 50%;
        margin-left: -0.28rem;
        top: -0.2rem;
        z-index: 10;
        color: #D5081E;
        transform: skewX(-20deg);

    }

    .baokao-process-panel>dl>dd>a {
        color: #fff;
    }

}

@media screen and (max-width:960px) {

    .baokao-process {
        display: none;
    }

    .yd-baokao-process {
        width: 3.75rem;
    }

    .yd-baokao-process-panel {

        margin-top: 0.3rem;
        box-sizing: border-box;
        width: 100%;
        height: 4.77rem;
        position: relative;
        overflow: hidden;

    }

    .yd-baokao-process-panel-line {
        width: 0.35rem;
        height: 4.77rem;
        background: url(/img/html5_join/new_index/yd-process-line.png)no-repeat;
        background-size: auto 100%;
        position: absolute;
        left: 50%;
        margin-left: -0.175rem;
    }

    .yd-baokao-process-panel .public-process {

        transition-duration: 0.5s;

    }

    .yd-baokao-process-panel .yd-baokao-process-one {

        width: 2.05rem;
        height: 0.75rem;
        background: url(/img/html5_join/new_index/yd-index-process-1.png)no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;


    }

    .yd-baokao-process-panel .yd-baokao-process-two {
        width: 2.05rem;
        height: 0.75rem;
        background: url(/img/html5_join/new_index/yd-index-process-2.png)no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0.6rem;
        right: 0;
        transition-delay: 1s;
    }

    .yd-baokao-process-panel .yd-baokao-process-three {
        width: 2.05rem;
        height: 0.75rem;
        background: url(/img/html5_join/new_index/yd-index-process-3.png)no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 1.15rem;
        left: 0;
        transition-delay: 1.5s;
    }

    .yd-baokao-process-panel .yd-baokao-process-four {
        width: 2.05rem;
        height: 0.75rem;
        background: url(/img/html5_join/new_index/yd-index-process-4.png)no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 1.7rem;
        right: 0;
        transition-delay: 2s;
    }

    .yd-baokao-process-panel .yd-baokao-process-five {
        width: 2.35rem;
        height: 0.75rem;
        background: url(/img/html5_join/new_index/yd-index-process-5.png)no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 2.25rem;
        left: 0;
        transition-delay: 2.5s;

    }

    .yd-baokao-process-panel .yd-baokao-process-six {
        width: 2.25rem;
        height: 0.75rem;
        background: url(/img/html5_join/new_index/yd-index-process-6.png)no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 2.8rem;
        right: 0;
        transition-delay: 3s;
    }

    .yd-baokao-process-panel .yd-baokao-process-serven {
        width: 2.25rem;
        height: 0.75rem;
        background: url(/img/html5_join/new_index/yd-index-process-7.png)no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 3.35rem;
        left: 0;
        transition-delay: 3.5s;
    }

    .yd-baokao-process-panel .yd-baokao-process-eight {
        width: 2.25rem;
        height: 0.75rem;
        background: url(/img/html5_join/new_index/yd-index-process-8.png)no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 3.9rem;
        right: 0;

        transition-delay: 4s;
    }


}